<template>
    <div class="device">
        <el-row :gutter="20" style="width: inherit;">
            <el-col :span="6" style="width: 100%;">
            终端设备
            <el-divider></el-divider>
            <br/>
                <el-table   :data="devicesList"   style="width: 100%">
                    <el-table-column label="名称"  prop="name"></el-table-column>
                    <el-table-column label="设备id">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>{{ scope.row.id }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">查看设备id</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="版本" prop="version"></el-table-column> -->
                    <el-table-column label="访问域名">
                        <template slot-scope="scope">
                            <el-input size="mini" v-model="scope.row.domain" /> <el-button size="mini" @click="updateDomain(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="店铺" prop="locationName"></el-table-column>
                    <el-table-column label="过期时间">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">
                                {{ 
                                scope.row.deadline ? $utils.formatDate(scope.row.deadline,"YYYY-MM-DD HH:mm:ss") : '无期限'
                                }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">
                                {{ 
                                scope.row.status == 1 ? '正常' : (scope.row.status == 2 ? '未激活' : '已过期') 
                                }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否在线">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">
                                {{ 
                                statistics.onLine ? (statistics.onLine.indexOf(scope.row.id) == -1 ? '离线' : '在线') : '离线'
                                }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作">
                    <template slot-scope="scope">
                        <a :href="scope.row.domain" target="_blank"><el-button size="mini">监控平台</el-button></a>
                        <!-- <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">监控平台</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">管理平台</el-button> -->
                    </template>
                    </el-table-column>
                </el-table>
                <!-- <br/>
                摄像头
                <el-divider></el-divider>
                <el-table   :data="cameraList"   style="width: 100%">
                    <el-table-column label="名称"  prop="name"></el-table-column>
                    <el-table-column label="账号" prop="account"></el-table-column>
                    <el-table-column label="IP" prop="ip"></el-table-column>
                    <el-table-column label="类型">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">
                                {{ 
                                scope.row.type == 1 ? '海康威视' :  '浙江大华'
                                }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属终端" prop="deviceName"></el-table-column>
                    <el-table-column label="位置" prop="locationName"></el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">
                                {{ 
                                scope.row.status == 1 ? '正常' : (scope.row.status == 2 ? '未激活' : '已过期') 
                                }}
                            </span>
                        </template>
                    </el-table-column>
                </el-table> -->
            <br/><el-divider/><br/>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import request from '@/utils/request'

export default {
    name: "device",
    data() {
        return {
            devicesList: [],
            searchParam: {pageNum: 1, pageSize: 100, conditions: []},
            statistics: {},
            cameraList: [],
            locationList: [],
            locationForm: {},
            locationVisible: false,
            isAdd: false,
        };
    },
    created() {
    },
    mounted(){
        this.getDevicesList()
        this.getStatistics()
        // this.getCameraList()
        this.getLocationList()
    },
    computed: {
        ...mapGetters(["name"]),
    },
    methods: {
        getDevicesList(){
            request({
                url: '/rest/userDevices/queryList',
                method: 'post',
                data: this.searchParam
            }).then(res => {
                if(res.status){
                    this.devicesList = res.data.records
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        getStatistics(){
            request({
                url: '/rest/userDevices/statistics',
                method: 'get'
            }).then(res => {
                if(res.status){
                    this.statistics = res.data
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        getCameraList(){
            request({
                url: '/rest/camera/queryList',
                method: 'post',
                data: {pageNum: 1, pageSize: 100, conditions: [{key: "status", value: 0, method: "ge"}]}
            }).then(res => {
                if(res.status){
                    this.cameraList = res.data.records
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        getLocationList(){
            request({
                url: '/rest/location/queryList',
                method: 'post',
                data: {pageNum: 1, pageSize: 100, conditions: [{key: "status", value: 0, method: "ge"}]}
            }).then(res => {
                if(res.status){
                    this.locationList = res.data.records
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        addLocation(){
            this.isAdd = true
            this.locationVisible = true
        },
        editLocation(index){
            this.isAdd = false
            this.locationVisible = true
            this.locationForm = this.locationList[index]
        },
        deleteLocation(index){
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = this.locationList[index]
                data.status = -1
                request({
                    url: '/rest/location/update',
                    method: 'post',
                    data: data,
                }).then(res => {
                    if(res.status){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getLocationList()
                    }else{
                        this.$message.error(res.message);
                    }
                }).catch((e) => {
                    console.error(e)
                    this.$message.error("网络错误!");
                });
            }).catch(() => {});
        },
        locationSubmit(){
            let submitURL = this.isAdd ? '/rest/location/insert' : '/rest/location/update' 
            request({
                url: submitURL,
                method: 'post',
                data: this.locationForm,
            }).then(res => {
                if(res.status){
                    this.locationVisible = false
                    this.getLocationList()
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        updateDomain(data){
            this.$confirm('修改可能导致部分功能无法使用, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request({
                    url: '/rest/userDevices/update',
                    method: 'post',
                    data: data
                }).then(res => {
                    if(res.status){
                        this.getDevicesList()
                    }else{
                        this.$message.error(res.message);
                    }
                }).catch((e) => {
                    console.error(e)
                    this.$message.error("网络错误!");
                });
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.device {
    height: 100%;
    width: -webkit-fill-available;

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
    display: table;
    content: "";
    }
    .clearfix:after {
    clear: both
    }
}
</style>
